<template>
    <div id="api">
        <el-button @click="syncApi" type="primary" style="margin-bottom: 15px">同步api</el-button>
        <el-collapse accordion>
            <el-collapse-item v-for="item in data">
                <template slot="title">
                    {{item.description}}    --   {{item.controllerCode}}
                </template>
                <div>

                    <el-table
                            :data="item.permissionList"
                            style="width: 100%"
                            max-height="500">
                        <el-table-column
                                prop="description"
                                label="描述">
                        </el-table-column>
                        <el-table-column
                                prop="permissionName"
                                label="权限名">
                        </el-table-column>
                        <el-table-column
                                prop="type"
                                label="请求类型">
                        </el-table-column>
                        <el-table-column
                                prop="url"
                                label="请求路径">
                        </el-table-column>
                    </el-table>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
    export default {
        name: "Api",
        data() {
            return{
                api:{
                    tags: null,
                    paths: null
                },
                data:[
                    {
                        id:null,
                        controllerCode:null,
                        description:null,
                        permissionList:[
                            {
                                id:null,
                                controllerCode:null,
                                description:null,
                                permissionName:null,
                                type:null,
                                url:null
                            }
                        ]
                    }
                ]
            }
        },

        methods:{
            async getApi(){
                const resp = await this.$http.get("/v3/api-docs");
                this.api = resp.data;
                //console.log(data);
            },
            async syncApi() {
                const resp = await this.$http.post("/api/sync", this.api);
                const data = resp.data;
                if (data.code === 200){
                    this.$message.success(data.info);
                    this.getList();
                }else{
                    this.$message.error(data.info);
                }
            },
            async getList() {
                const resp = await this.$http.post("/api/list");
                const data = resp.data;
                if (data.code === 200){
                    //console.log(data.rows);
                    this.data = data.rows;
                }else {
                    this.$message.error(data.info);
                }
            }
        },

        created() {
            this.getList();
            this.$http.get("/swagger-ui/index.html");
            this.getApi();
        }
    }
</script>

<style>
    .el-collapse-item__header {
        font-size: 16px!important;
        font-weight: bolder;
    }
</style>
